<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>鞋柜</title>
	<link rel="stylesheet/less" type="text/css" href="canbiangui.less"></link>
</head>
<body>
	<div class="canbiangui1 ruleWC">
		<div class="chuanxiedeng">
			<div class="dinggui rule txtArea gm" id="顶柜"></div>
			<div class="jingzi rule txtArea" id="镜子"></div>
			<div class="xiedeng rule txtArea gm" id="穿鞋凳"></div>
		</div>
		<div class="xiegui">
			<div class="dinggui2 rule txtArea gm" id="顶柜2"></div>
			<div class="cao rule txtArea" id="洞口"></div>
			<div class="digui">
				<div class="chouti rule txtArea gm" id="抽屉"></div>
				<div class="xiaxiegui rule txtArea gm" id="鞋柜"></div>
			</div>
			<div class="tixiequ rule txtArea" id="踢鞋区"></div>
		</div>
		<div class="sanjiaogui rule txtArea gm" id="斜柜"></div>
		<div class="bingxiang">
			<div class="bingxianggui rule txtArea gm" id="顶柜3"></div>
			<div class="bingxiangqu rule txtArea" id="冰箱"></div>
		</div>

		<div class="person"></div>

		<div class="shuomingArea">
			<span class="shuoming1">右下侧扣开</span>
			<span class="shuoming2">翻开</span>
			<span class="shuoming3">双开门</span>
			<span class="shuoming4">下面扣开，留槽</span>
			<span class="shuoming5">双开门，上面扣开</span>
			<span class="shuoming6">左侧开门，到顶，拉直器</span>
			<span class="shuoming7">双开门</span>
		</div>
	</div>
	<div class="canbiangui2">
		<div class="sanjiaogui"></div>
	</div>
	<div class="canbiangui3 ruleWC">
		<div class="zuo ruleWC">
			<div class="chuanxiedeng"></div>
			<div class="xiegui"></div>
		</div>
		<div class="zhong">
			<div class="xiexian"></div>
		</div>
		<div class="you"></div>
	</div>

	
	<div class="box">
		<div class="row" id="文字" connect="txt"></div>
		<div class="row" id="参考线" connect="ruleW|ruleH|ruleWCW|ruleWCH"></div>
		<div class="row" id="柜门" connect="guimen"></div>
		<div class="row" id="参照物" connect="person"></div>
		<div class="row" id="说明" connect="shuomingArea"></div>
		<div class="row" id="柜门开关" connect="柜门开关"></div>
	</div>
</body>
<script src="less.js"></script>
<script src="jquery.min.js"></script>
<script>
	setTimeout(() => {
		$(".gm").each((i,e) => {
			$(e).append(`<span class="guimen guimen${e.id}"></span>`)
			if("顶柜2"==e.id||"鞋柜"==e.id||"顶柜3"==e.id){
				$(e).append(`<span class="guimen guimen${e.id}2"></span>`)
			}
		});
		$(".txtArea").each((i,e) => {
			$(e).append(`<span class="txt">${e.id}</span>`)
		});
		$(".rule").each((i,e) => {
			var cn = e.className.split(" ")[0]
			$(e).append(`<div class="ruleW ${cn}Width"></div><div class="ruleH ${cn}Height"></div>`)
			$(`.${cn}Width`).html($(`.${cn}Width`).width())
			$(`.${cn}Height`).html($(`.${cn}Height`).height()).css(`line-height`,$(`.${cn}Height`).height()+"px")
		});
		$(".ruleWC").each((i,e) => {
			var cn = e.className.split(" ")[0]
			$(e).append(`<div class="ruleWCW ${cn}Width"></div><div class="ruleWCH ${cn}Height"></div>`)
			$(`.${cn}Width`).html($(e).outerWidth())
							.width($(e).outerWidth())
							.css("left",`-${$(e).css("borderLeftWidth")}` )
			$(`.${cn}Height`).html($(e).outerHeight())
							.height($(e).outerHeight())
							.css(`line-height`,$(e).outerHeight()+"px")
							.css("top",`-${$(e).css("borderTopWidth")}` )
		});
		$(".row").each((i,e) => {
			$(e).append(`<input type="checkbox" id="${$(e).attr("connect")}" /><span>${e.id}</span>`)
		});
		$("input[type=checkbox]").click((e) => {
			if(e.currentTarget.id=="柜门开关"){
				$(`.guimen`).toggleClass("transformNone")
			}else{
				e.currentTarget.id.split("|").forEach((ele) => {
					$(`.${ele}`).toggle()
				});
			}
		});
	}, 100);
</script>

</html>